<template>
    <div id="main">
        <el-button type="primary" class="goback" @click="goback">返回上一级</el-button>
        <h3 class="title">{{FisrtTitle}}</h3>
        <el-form  class="form" ref="form" :model="formData" :rules="rules" label-width="200px">
            <el-form-item prop="couponName" label=" 优惠券名称：">
                <el-input class="item-input" v-model="formData.couponName"></el-input>
            </el-form-item>
             <el-form-item prop="couponTpl" label="使用模板：">
                <el-select class="item-input" v-model="formData.couponTpl">
                    <el-option value="">请选择</el-option>
                    <el-option value="1" label="默认模板">默认模板</el-option>
                </el-select>
            </el-form-item>
            <el-form-item  prop="totalNum" label="发放总量：">
                <el-input class="item-input" v-model="formData.totalNum"></el-input>
            </el-form-item>
            <el-form-item  prop="couponShape" label=" 优惠形式：">
                 <el-select class="item-input" v-model="formData.couponShape">
                    <el-option value="">请选择</el-option>
                    <el-option value="10" label="现金">现金</el-option>
                    <el-option value="20" label="折扣">折扣</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="优惠形式-金额：" prop="amount" v-if="formData.couponShape==10" >
                <el-input class="item-input" v-model="formData.amount"></el-input>
            </el-form-item>
            <el-form-item label="优惠形式-折扣：" prop="discount" v-if="formData.couponShape==20" >
                <el-input class="item-input" v-model="formData.discount"></el-input>
            </el-form-item>
            <el-form-item prop="useThreshold" label="使用门槛：">
                 <el-select class="item-input" v-model="formData.useThreshold">
                    <el-option value="">请选择</el-option>
                    <el-option value="1010" label="无限制">无限制</el-option>
                    <el-option value="1020" label="减满券">减满券</el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="useAmount" label="使用门槛-满多少：" v-if="formData.useThreshold==1020">
                <el-input class="item-input" v-model="formData.useAmount"></el-input>
            </el-form-item>
            <el-form-item prop="receiveType" label=" 领取方式：">
                 <el-select class="item-input" v-model="formData.receiveType">
                    <el-option value="">请选择</el-option>
                    <el-option value="AUTO" label="无限制">无限制</el-option>
                    <el-option value="INITACTIVE" label="用户主动领取">用户主动领取</el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="userLevel" label=" 用户等级：">
                <el-input class="item-input" v-model="formData.userLevel"></el-input>
            </el-form-item>
             <el-form-item prop="limitCount" label=" 每人限领多少张：">
                <el-input class="item-input" v-model="formData.limitCount"></el-input>
            </el-form-item>
            <el-form-item prop="couponExpiredType" label=" 有效期-类型-固定日期：">
                <el-select class="item-input" v-model="formData.couponExpiredType">
                    <el-option value="">请选择</el-option>
                    <el-option value="CET1010" label="固定日期">固定日期</el-option>
                    <el-option value="CET1020" label="领到券当日开始N天有效">领到券当日开始N天有效</el-option>
                    <el-option value="CET1030" label="领到券次日开始N天有效">领到券次日开始N天有效</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生效时间-过期时间：：" prop="timeRangeStarts" v-if="formData.couponExpiredType=='CET1010'">
                  <el-date-picker
                        v-model="formData.timeRangeStarts"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
            </el-form-item>

             <el-form-item label=" 有效期-类型-天数设置：" prop="limitDays" v-if="formData.couponExpiredType=='CET1020'||formData.couponExpiredType=='CET1030'">
                <el-input class="item-input" v-model="formData.limitDays"></el-input>
            </el-form-item>
            <el-form-item label="可使用/不可以使用商品：">
                <el-switch
                    style="display: block"
                    v-model="formData.isUse"
                    active-value="N"
                    inactive-value="Y"
                    active-color="#ff4949"
                    inactive-color="#13ce66"
                    active-text="不可使用商品"
                    inactive-text="可使用商品"
                    @change="isUseData"
                    >
                </el-switch>
            </el-form-item>
             <el-form-item label="可使用商品类型：" v-if="formData.isUse=='Y'" >
                 <el-select class="item-input" v-model="formData.productType" @change="getClassList">
                    <el-option value="">请选择</el-option>
                    <el-option value="PTC1001" label="所有寄卖商品">所有寄卖商品</el-option>
                    <el-option value="PTC1002" label="指定寄卖商品">指定寄卖商品</el-option>
                    <el-option value="PTC1003" label="指定某种品牌商品">指定某种品牌商品</el-option>
                    <el-option value="PTC1004" label="指定某品牌商品">指定某品牌商品</el-option>
                    <el-option value="PTG1001" label="全部出售商品">全部出售商品</el-option>
                    <el-option value="PTG1002" label="指定出售商品">指定出售商品</el-option>
                    <el-option value="PTG1003" label="指定某种出售品牌类商品">指定某种出售品牌类商品</el-option>
                    <el-option value="PTG1004" label="指定某出售品牌商品">指定某出售品牌商品</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="不可使用商品类型：" v-if="formData.isUse=='N'">
                 <el-select class="item-input" v-model="formData.unProductType" @change="getClassList">
                    <el-option value="">请选择</el-option>
                    <el-option value="PTC1001" label="所有寄卖商品">所有寄卖商品</el-option>
                    <el-option value="PTC1002" label="指定寄卖商品">指定寄卖商品</el-option>
                    <el-option value="PTC1003" label="指定某种品牌商品">指定某种品牌商品</el-option>
                    <el-option value="PTC1004" label="指定某品牌商品">指定某品牌商品</el-option>
                    <el-option value="PTG1001" label="全部出售商品">全部出售商品</el-option>
                    <el-option value="PTG1002" label="指定出售商品">指定出售商品</el-option>
                    <el-option value="PTG1003" label="指定某种出售品牌类商品">指定某种出售品牌类商品</el-option>
                    <el-option value="PTG1004" label="指定某出售品牌商品">指定某出售品牌商品</el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="分类：" v-if="formData.productType=='PTC1003'||formData.productType=='PTG1003'||formData.unProductType=='PTC1003'||formData.unProductType=='PTG1003'">
                <el-button type="primary" @click="showDialog(1)">请选择分类</el-button>
            </el-form-item>
            <el-form-item label=" 品牌：" v-if="formData.productType=='PTC1004'||formData.productType=='PTG1004'||formData.unProductType=='PTC1004'||formData.unProductType=='PTG1004'">
               <el-button type="primary" @click="showDialog(2)">请选择品牌</el-button>
            </el-form-item>
            <el-form-item label=" 商品：" v-if="formData.productType=='PTC1002'||formData.productType=='PTG1002'||formData.unProductType=='PTC1002'||formData.unProductType=='PTG1002'">
                <el-button type="primary" @click="showDialog(3)">请选择商品</el-button>
            </el-form-item>
            <el-form-item prop="receiveChannelDist" label="领取渠道：">
                 <el-select class="item-input" v-model="formData.receiveChannelDist" @change="getDitch">
                    <el-option value="">请选择</el-option>
                    <el-option value="1" label="所有渠道都可用">所有渠道都可用</el-option>
                    <el-option value="2" label="指定渠道可用">指定渠道可用</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="可领取的主/子渠道：" prop="getChannel" v-if="formData.receiveChannelDist=='2'">
                 <el-cascader
                    :props="defaultData"
                    :options="options"
                    v-model="formData.getChannel"
                    @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item prop="useChannelDist" label="使用渠道：">
                 <el-select class="item-input" v-model="formData.useChannelDist" @change="getDitch">
                    <el-option value="">请选择</el-option>
                    <el-option value="1" label="所有渠道都可使用">所有渠道都可使用</el-option>
                    <el-option value="2" label="指定渠道可用">指定渠道可用</el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="可用主/子渠道：" prop="useChannel" v-if="formData.useChannelDist==2">
                 <el-cascader
                    :props="defaultData"
                    :options="options"
                    v-model="formData.useChannel"
                    @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item prop="useDesc" label="使用说明：">
                <el-input class="item-input" v-model="formData.useDesc" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input class="item-input" v-model="formData.remark" type="textarea"></el-input>
            </el-form-item>
           <el-form-item class="btnList">
               <el-row>
                    <el-button  type="primary" @click="confirm" :disabled="disabled">{{btnTitle}}</el-button>
                    <el-button  type="danger" @click="resetForm">重 置</el-button>
               </el-row>
           </el-form-item>

        </el-form>
        <el-dialog
            title="操作"
            :visible.sync="pageData.dialog"
            width="40%"
            :before-close="handleClose">
            <el-transfer
                filterable
                filter-placeholder="请输入名称"
                v-model="pageData.qdclassfiy"
                :titles="['未选择', '已选择']"
                :data="pageData.classfiyList"
                :props="salerules"
                >
            <el-button class="transfer-footer" slot="left-footer" @click="addMore" size="small">加载更多</el-button>
            </el-transfer>

                <span slot="footer" class="dialog-footer">
                <el-button @click="pageData.dialog = false">取 消</el-button>
                <el-button type="primary" @click="comfirm" >确 定</el-button>
        </span>
</el-dialog>
    </div>
</template>
<script>
import dialogVue from '@/components/dialog.vue'
import Data from './index.js';
import {
   createDiscount,
   getClassify,
   getbrandList,
    allChannel,
   getOneDiscount
} from '@/api/discount/discount.js'
import {productList} from '@/api/product/product.js'
export default {
    components:{
        dialogVue
    },
    data(){
        return JSON.parse(JSON.stringify(Data))
    },
    mounted(){
        this.resetData();
        this.getDitch();
        if(this.$route.query.id){
            this.btnTitle="更新"
            this.FisrtTitle ="编辑优惠券"
            this.getdisCount(this.$route.query.id);
        }else{
            this.FisrtTitle ="创建优惠券"
            this.btnTitle="提交"
        }
          console.log(this.formData.isUse)
    },
    methods:{
        goback(){ //返回上一级
            this.$router.push(
                {path:"/discount"}
            )
        },
        getdisCount(data){
            getOneDiscount(data).then(res=>{
                if(res.data.code=="OK"){
                    for(let z in res.data.data){
                        this.formData[z] = res.data.data[z]
                    }
                    this.getClassList();
                    this.formData.timeRangeStarts.push(new Date(this.formData.timeRangeStart),new Date(this.formData.timeRangeEnd));
                    this.formData.useChannel.push(this.formData.useChannelCode-0,this.formData.useChildChannelCode-0);
                    this.formData.getChannel.push(this.formData.channelIdCode-0,this.formData.childChannelCode-0);
                    this.formData.unProductType&&(this.formData.isUse ="N")
                }
            })
        },
        handleClose(){ //关闭弹窗
            this.pageData.dialog=false;
        },
        showDialog(type){ //显示弹窗
            this.pageData.dialog=true;
        },
        comfirm(){
            this.pageData.dialog =false;
        },
        getDitch(){ //获取渠道
            // if(this.formData.receiveChannelDist=="1"||this.formData.useChannelDist=="2"){
                allChannel().then(res=>{
                    if(res.data.code=="OK"){
                        this.options=res.data.data
                    }else{
                        this.$message.error(res.data.message)
                    }
                }).catch(error=>{
                    this.$message.error(error)
                })
            // }
        },
        getClassList(){ // 获取商品列表
            if(this.formData.productType=="PTC1004" ||this.formData.unProductType=="PTC1004"){
                this.salerules = this.diarules
                this.pageData.classfiyList =[];
                this.pageData.qdclassfiy=[];
                this.current = 1;
                 let data ={size:10,current:this.current};
                getClassify(data).then(res=>{
                    if(res.data.code=="OK"){
                       
                         res.data.data.map(res=>{
                            this.pageData.classfiyList.push(res)
                        })
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }else if(this.formData.productType=="PTC1003" ||this.formData.unProductType=="PTC1003"){
                this.salerules = this.brandrules
                this.pageData.classfiyList =[];
                this.pageData.qdclassfiy=[]
                this.current = 1;
                let data ={size:10,current:this.current};;
                getbrandList(data).then(res=>{
                    if(res.data.code=="OK"){

                         res.data.data.records.map(res=>{
                            this.pageData.classfiyList.push(res)
                        })
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }else if(this.formData.productType=="PTC1002" ||this.formData.unProductType=="PTC1002"){
                this.salerules = this.goodsrules
                this.pageData.classfiyList =[];
                this.current = 1;
                 let data ={size:10,current:this.current};
                productList(data).then(res=>{
                    if(res.data.code=="OK"){
                        res.data.data.records.map(res=>{
                            this.pageData.classfiyList.push(res)
                        })
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }
        },
        handleChange(){
            console.log(this.formData.useChannel)
        },
        resetData(){
            this.formData={
                couponName:'',//优惠券名称 required
                couponTpl:'',//使用模板 required
                totalNum:"",//发放总量 required
                couponShape:"",//优惠形式 required
                amount:"",//优惠形式-指定现金-金额
                discount:"",//优惠形式-指定现金
                useThreshold:"",//使用门槛 required
                useAmount:"",//使用门槛-满多少 required
                receiveType:"",//领取方式: required
                userLevel:"",//领取规则-用户-用户等级 required
                limitCount:"",//每人限领多少张 required
                couponExpiredType:"",//有效期-类型 required
                timeRangeStart:"",//有效期-类型-固定日期
                timeRangeEnd:"",//有效期-类型-固定日期
                limitDays:"",//有效期-类型-天数设置
                productType:"",//可使用商品类型
                unProductType:"",//不可使用商品类型
                receiveChannelDist:"",//领取渠道- required
                childChannelCode:"",//可以领取的子渠道
                channelIdCode:"",//可以领取的主渠道
                useChannelDist:"",//使用的渠道定义 required
                useChildChannelCode:"",//可用子渠道
                useChannelCode:"",//可用主渠道
                useDesc:"",//使用说明 required
                remark:"",//备注
                categoryIds:[],//分类ID
                brandIds:[],//品牌ID
                productIds:[],//商品ID
                isUse:"Y",
                useChannel:[],
                getChannel:[],
                timeRangeStarts:[]
            }
        },
        isUseData(){
            if(this.formData.isUse=="Y"){
                this.formData.unProductType="";
                this.formData.categoryIds="";
                this.formData.brandIds="";
                this.formData.productIds="";
            }else{
                this.formData.productType="";
                this.formData.categoryIds="";
                this.formData.brandIds="";
                this.formData.productIds="";
            }
        },
        resetForm(){ //重置
            this.$refs.form.resetFields();
            this.resetData();
        },
        confirm(){ //提交
            this.$refs.form.validate((valid) => {
                if (valid) {
                   this.disabled =true;
                   let obj ={};
                   for(let z in this.formData){
                       obj[z] = this.formData[z];
                   }
                   obj.timeRangeStart =new Date(obj.timeRangeStarts[0]).getTime();
                   obj.timeRangeEnd =new Date(obj.timeRangeStarts[1]).getTime();
                   if(obj.useChannel.length>0){
                       obj.useChannelCode=obj.useChannel[0]
                       obj.useChildChannelCode=obj.useChannel[1]
                   }
                   if(obj.getChannel.length>0){
                       obj.channelIdCode=obj.getChannel[0]
                       obj.childChannelCode=obj.getChannel[1]
                   }
                   if(obj.productType=="PTC1002"||obj.unProductType=="PTC1002"){
                        obj.productIds=this.pageData.qdclassfiy
                   }else if(obj.productType=="PTC1003"||obj.unProductType=="PTC1003"){
                        obj.categoryIds=this.pageData.qdclassfiy
                   }else if(obj.productType=="PTC1004"||obj.unProductType=="PTC1004"){
                       obj.brandIds=this.pageData.qdclassfi
                   }
                   if(!obj.categoryIds||obj.categoryIds.length==0){
                       delete obj.categoryIds;
                   }
                   if(!obj.brandIds||obj.brandIds.length==0){
                       delete obj.brandIds;
                   }
                   if(!obj.productIds||obj.productIds.length==0){
                       delete obj.productIds;
                   }
                   delete obj.isUse;
                   delete obj.useChannel;
                   delete obj.getChannel;
                   delete obj.timeRangeStarts;
                   if(this.$route.query.id){
                       createDiscount(obj,"put").then(res=>{
                            if(res.data.code=="OK"){
                                this.disabled =false;
                                this.goback();
                            }else{
                                this.disabled =false;
                                this.$message.error(res.data.message)
                            }
                        })
                   }else{
                        createDiscount(obj,"POST").then(res=>{
                            if(res.data.code=="OK"){
                                this.disabled =false;
                                this.goback();
                            }else{
                                this.disabled =false;
                                this.$message.error(res.data.message)
                            }
                        })
                   }



                }
            });
        },
        addMore(){ //加载更多
            this.current++;
            this.getClassList()
        }
    }
}
</script>
<style scoped>
    #main{
        background-color: #fff;
    }
    .goback{
        margin-top: 20px;
    }
    .title{
        text-align: center;
        width:800px;;
    }
    .item{
        display: flex;
        align-items: center;
    }
    /* .item-title{
        width:160px;
        text-align: right;
        display: inline-block;
    } */
    .item-input{
       width: 400px;
    }
    .form{
        width:800px;
        margin-top: 20px;
        background-color: #fff;
        padding:20px;
        box-sizing: border-box;
    }
    .btnList{
        display: flex;
        justify-content: center;
        margin-right: 200px;
    }
    #main .el-form-item__error{
        text-align: center;
        width: 100%;
    }
    .tcbox{
        width: 800px;
        height: 500px;
        background-color: rgba(0, 0, 0, 0.3)
    }
</style>
